<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>用户中心-我的评价</title>
    [#include "common/include.ftl"]
    <link rel="styleSheet" href="${base}/resource/css/member.css">
    [#import "common/pagination.ftl" as p/]
	<script>
		$(function() {
			var $_parents = null;
			/**评分事件*/
		    $('.r-list li').mouseover(function() {
				var current = $(this).index();
				$('.r-list li').removeClass('current');
				return $('.r-list li:lt(' + (current + 1) + ')').addClass('current');
		    }).mouseout(function() {
				var current = $('input.pf').val();
				$('.r-list li').removeClass('current');
				return $('.r-list li:lt(' + (parseInt(current)) + ')').addClass('current');
		    }).click(function() {
				$('input.pf').val($(this).index() + 1);
				$('#grade-msg').hide();
		    });
			
			/**输入内容字数剩余*/
			var minNum = 10;
		   	var maxNum = 500;
		    $('textarea.pl').keyup(function() {
				//提示还可以输入多少字
				var val = $(this).val();
				if(val.length > maxNum) {
					$(this).val(val.substr(0, maxNum));
				}
				$('.z-num .num').text(maxNum - $(this).val().length);
				//隐藏评价内容异常提示信息
				if(val.length > minNum) {
					$("#content-msg").hide();
				}
		    });
			/**评价事件*/
		    $('.review-sub').click(function() {
				var $_next;
				if (parseInt($('input.pf').val()) == 0) {
					$('#grade-msg').html('你的评分是我们前进的动力').show();
					return false;
				}
				
				var sCont = $.trim($('textarea.pl').val());
				if (sCont.length < 5 || sCont.length > 500) {
					$("#content-msg").html('麻烦填写5-500个字呦').show();
					$('textarea.pl').focus();
					return false;
				}
				
				$_parents.find('.open-review').addClass('yes').removeClass('no').attr({
					content: sCont,
					score: parseInt($('input.pf').val())
				});
				
				ajax({
					url: base + '/member/comment.jhtml',
					data: {
						orderItemId: $('input[name=pid]').val(),
						score: $('input.pf').val(),
						content: $('textarea.pl').val(),
						anonymous: $('input[name=anonymous]').is(':checked')
					},
					success: function(result){
						$_next = $_parents.nextAll('dl');
						console.log($_next);	
						if ($_next.length == 0) {
							return $_parents.find('.open-review').trigger('click');
						} else {
							return $_next.eq(0).find('.open-review').trigger('click');
						}
					}
               });
		    });
			/**评价展开事件*/
		    $('.open-review').click(function() {
				var nScore, sContent;
				if($(this).hasClass('yes')) {
					$("#review-box").addClass('finish');
					nScore = parseInt($(this).attr('score'));
					sContent = $(this).attr('content');
					$('.finish-review .review-content').text(sContent);
					$('.f-r-list li').removeClass('current');
					$('.f-r-list li:lt(' + (nScore) + ')').addClass('current');
				} else {
					$("#review-box").removeClass('finish');
				}
				if($(this).hasClass('current')) {
					$("#review-box").hide();
					$(this).text($(this).hasClass('yes') ? '已评价' : '评价').removeClass('current');
					return false;
				}
				$_parents = $(this).parents('dl');
				$('.r-list li').removeClass('current');
				$('.r-msg').text('');
				$('input.pf').val(0);
				$('textarea.pl').val('');
				$('.z-num .num').text(500);
				$('input[name=nm]').prop('checked', false);
				$('input[name=pid]').val($(this).attr('pid'));
				$('.open-review').removeClass('current').text('评价');
				$('.open-review.yes').text('已评价');
				return $(this).text('收起评价').addClass('current').parents('dl').after($("#review-box").show());
		    });
			
		    $('.select-product').change(function() {
				$("#commentForm").submit();
		    });
			$_parents = $('.open-review.default').parents('dl');
		    return $('.open-review.default').trigger('click');
		});
	</script>
</head>
<body class="customer">
[#include "common/header.ftl"]
<div class="crumbs">
    <a href="${base}/member/index.jhtml">会员中心</a>
	<i style='font-family: simsun;font-style: normal;'>></i>
	<a href="#">消息中心</a>
	<i style='font-family: simsun;font-style: normal;'>></i>
	<a href="#">我的评价</a>
</div>
<div id="member-main">
[#assign menuNo='comment'/]
[#include "common/member-left.ftl"/]
    <div class="member-right">
        <div class="right-wrap">
            <h2 class="right-title">
            	<form id="commentForm" action="${base}/member/comment/list.jhtml" method="get">
					<input type='hidden' id="orderNo" value="${(orderNo)!''}"/>
	            	<span>我的评价</span>
					<select class="fr select-product" name="commentsType">
						<option value="all" [#if !commentsType?? || commentsType = 'all']selected="selected"[/#if]>全部商品</option>
						<option value="no" [#if commentsType?? && commentsType = 'no']selected="selected"[/#if]>未评价</option>
						<option value="yes" [#if commentsType?? && commentsType = 'yes']selected="selected"[/#if]>已评价</option>
					</select>
            	</form>
			</h2>
            <div class="member-order">
                <div class="clear"></div>
                <table class="member-table-list" id="order-list">
                    <tr>
                        <th width="120">&nbsp;</th>
		                <th width="300">商品</th>
		                <th width="100">规格</th>
						<th width="150">价格</th>
		                <th width="200">购买时间</th>
		                <th>操作</th>
                    </tr>
	                [#if pager?? && pager.list?has_content]
	                [#else]
	                    <tr>
	                        <td colspan="6" class="list-empty">暂无评价</td>
	                    </tr>
	                [/#if]
                </table>
				[#if pager?? && pager.list?has_content]
					<div  class="review-peoduct">
                    [#list pager.list as orderItem]
                    <dl class="review-peoduct">
						<dt class="f-img">
							<a href="${base}/goods/${orderItem.goodsId}.jhtml" target="_blank">
								<img class="lazy" data-original="[@Pic pic=orderItem.image postfix='100x100'/]" postfix='100x100' width="100" height="100">
							</a>
						</dt>
						<dd class="i-p">
							<a href="${base}/goods/${orderItem.goodsId}.jhtml" target="_blank">
								${orderItem.productName}
							</a>
						</dd>
						<dd class="f-gg center">
							<span>${orderItem.specification}</span>
						</dd>
						<dd class="f-price center">
							<span class="price">${currency(orderItem.salePrice, true)}</span>
						</dd>
						<dd class="f-date center">${orderItem.feeDate}</dd>
						<dd class="f-cz center">
							<p>
								<a href="javascript:;" score="${(orderItem.comment.score)!''}" content="${(orderItem.comment.content)!''}" pid="${orderItem.id}" class="open-review [#if orderItem_index=0]default[/#if] [#if orderItem.comment??] yes [#else] no [/#if]">
									[#if orderItem.comment??]已评价[#else]评价[/#if]
								</a>
							</p>
						</dd>
		            </dl>
                    [/#list]
				</div>	
                [/#if]
				<div id="review-box" class="finish"><span class="conjtw"></span>
	                <table class="finish-review">
						<tr class="pf">
							<td class="title"><span>评分    </span></td>
							<td width="400px">
								<ul class="f-r-list">
									<li class="first current"></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
								</ul>
								<input type="hidden" name="pf" value="0" class="pf">
							</td>
						</tr>
						<tr>
							<td class="title"><span>评价</span></td>
							<td class="review-content"></td>
						</tr>
	                </table>
	                <form id="review-form">
						<input type="hidden" name="pid" value="1">
						<table>
							<tr class="pf">
								<td class="title"><em>*</em><span>评分</span></td>
								<td width="400px">
									<ul class="r-list">
										<li></li>
										<li></li>
										<li></li>
										<li></li>
										<li></li>
									</ul>
									<p id="grade-msg" class="pl-error">请选择您对本商品的评分</p>
									<input type="hidden" name="pf" value="0" class="pf">
								</td>
							</tr>
							<tr>
								<td class="title"><em>*</em><span>评价</span></td>
								<td>
									<textarea placeholder="请输入您对本商品的看法" class="pl"></textarea>
									<p class="z-num">
										<span id="content-msg" class="error"></span>
										<span>还可以输入</span><span class="num">500</span><span>个字</span>
									</p>
								</td>
							</tr>
							<tr class="r-btns">
								<td>&nbsp;</td>
								<td>
									<a href="javascript:;" class="hp-button review-sub">评论并继续</a>
									<label class="nm">
									<input type="checkbox" name="anonymous" checked="checkede">匿名评价
									</label>
								</td>
							</tr>
						</table>
	                </form>
				</div>
			[@p.pager pager = pager url = "${base}/member/comment/list.jhtml" parameterMap={
				"orderNo": "${(orderNo)!''}",
				"commentsType": "${(commentsType)!''}"
			}/]
            </div>
        </div>
    </div>
    <div class="clear"></div>
</div>
[#include "common/footer-slidebar-lazyload.ftl"]
</body>
</html>